<template>
	<view class="content-area ">
		<view class="left-filtrate-area u-flex-col">
			<view class="filtrate-where-area">
				<view v-for="(v,k) in filtrateWhereDatas" :key="k" @click="selectFiltrateFun(k,v)"
					class="filtrate-where-item bold u-flex u-row-between"
					:class="{'selected':selectFiltrateListsKeys.indexOf(k) != -1}">
					<view class="xs" v-html="v.label||''"></view>
					<u-icon name="checkmark-circle-fill"
						:color="selectFiltrateListsKeys.indexOf(k) == -1?'transparent':'#2953ff'" size="28"></u-icon>
				</view>
			</view>
			<view class="operation-button-area u-padding-18 u-flex-col u-col-between">
				<u-button type="primary" hover-class="none" @click="showMultipleRulesPopup" :custom-style="{
					background :'#2953ff',
					fontWeight:'bold'
				}">多规则筛选</u-button>
				<u-button @click="resetCondition" type="primary" :plain="true" hover-class="none" :custom-style="{
					color :'#2953ff !important',
					fontWeight:'bold'
				}">重置</u-button>
			</view>
		</view>
		<view class="right-content-area">
			<view class="u-text-center area-content-center"
				v-if="Object.keys(selectFiltrate).length <= 0 && productLists.length <= 0">
				<u-icon name="grid" color="#2953ff" size="50"></u-icon>
				<view class="u-main-color u-padding-32">选择左侧“准入规则”，即可查看当前可准入进件产品，也可“多规则”筛选，查看多规则准入产品！</view>
			</view>
			<view class="u-text-center area-content-center"
				v-else-if="Object.keys(selectFiltrate).length > 0 && productLists.length <= 0">
				<u-icon name="search" color="#2953ff" size="50"></u-icon>
				<view class="u-main-color u-padding-32">暂无匹配产品</view>
			</view>
			<view v-else-if="Object.keys(selectFiltrate).length > 0 && productLists.length > 0"
				class="product-show-area">
				<view class="product-item" v-for="(item,index) in productLists" :key="index" @click="goPage(item.url,item.open_type,item.type)">
					<view class="u-flex" v-if="item.hideMain != true">
						<u-avatar :size="30" :src="item.image"></u-avatar>
						<view class="nr bold u-padding-left-8 u-main-color">{{item.title||''}}</view>
					</view>
					<view class="xs u-tips-color u-padding-top-12" v-if="item.hint">
						{{item.hint||'hint'}}
					</view>
				</view>
			</view>
		</view>
		<u-select :z-index="1800" v-model="selectFiltrateShowStatus" :list="selectFiltrateLists"
			@confirm="selectConfirm"></u-select>
		<u-popup :z-index="1500" v-model="multipleRulesPopupShowStatus" border-radius="16" mode="bottom"
			:safe-area-inset-bottom="true" :closeable="true">
			<view class="xxl bold u-padding-18">筛选条件</view>
			<scroll-view scroll-y="true" style="max-height: 50vh;">
				<view v-for="(v,k) in filtrateWhereDatas" :key="k" @click="selectFiltrateFun(k,v)"
					class="filtrate-where-item bold u-flex u-row-between u-padding-32 u-border-bottom u-margin-left-24 u-margin-right-24"
					:class="{'selected':selectFiltrateListsKeys.indexOf(k) != -1}">
					<view class="xs" v-html="v.label||''"></view>
					<u-icon name="checkmark-circle-fill"
						:color="selectFiltrateListsKeys.indexOf(k) == -1?'transparent':'#2953ff'" size="28"></u-icon>
				</view>
			</scroll-view>

			<view class=" u-padding-18 u-flex row" style="justify-content: space-evenly;">
				<u-button type="primary" hover-class="none" @click="showMultipleRulesPopup" :custom-style="{
					width:'30vw',
					background :'#2953ff',
					fontWeight:'bold'
				}">确定</u-button>
				<u-button @click="resetCondition" type="primary" hover-class="none" plain :custom-style="{
					width:'30vw',
					color :'#2953ff !important',
					fontWeight:'bold'
				}">重置</u-button>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
		<hint-buy-vip-message ref="hintBuyVip"></hint-buy-vip-message>
	</view>
</template>
<script>
	import {
		getUser
	} from '@/api/user';
	import {
		loadingType
	} from '@/utils/type';
	import {
		loadingFun
	} from '@/utils/tools'
	import {
		filtrate
	} from '@/api/help'
	import filtrateWhere from './filtrateWhere.json'
	export default {
		data() {
			return {
				page: 1,
				productLists: [],
				selectFiltrate: {},
				nowReadySelectionKey: 0,
				selectFiltrateLists: [],
				status: loadingType.LOADING,
				selectFiltrateListsKeys: [],
				selectFiltrateShowStatus: false,
				filtrateWhereDatas: filtrateWhere,
				multipleRulesPopupShowStatus: false
			}
		},
		methods: {
			// 选择条件方法
			selectFiltrateFun(k, v, multipleChoice = false) {

				// 如果用户有子项
				if (v.filtrateWhereItem) {
					if (!multipleChoice) {
						this.selectFiltrate = []
					};
					this.nowReadySelectionKey = k;
					this.selectFiltrateShowStatus = true;
					this.selectFiltrateLists = v.filtrateWhereItem
				} else {
					if (!multipleChoice) {
						this.selectFiltrate = []
						this.selectFiltrateListsKeys = [];
						this.selectFiltrateListsKeys = [k];
					};
					Object.defineProperty(this.selectFiltrate, this.filtrateWhereDatas[k].field, {
						value: this.filtrateWhereDatas[k].value,
						enumerable: true // 是否可枚举，默认为false
					});
					this.queryDatas();
				}
			},
			selectConfirm(e, v) {
				let d = e[0];
				if (!this.multipleRulesPopupShowStatus) this.selectFiltrateListsKeys = [];
				this.selectFiltrateListsKeys.push(this.nowReadySelectionKey);

				let data = this.filtrateWhereDatas[this.nowReadySelectionKey].filtrateWhereItem;

				let selectInfo = {};

				data.forEach((v, k) => {
					if (v.value == d.value) selectInfo = v
				})
				if (selectInfo.field) {
					Object.defineProperty(this.selectFiltrate, selectInfo.field, {
						value: d.value,
						enumerable: true // 是否可枚举，默认为false
					});
					this.queryDatas();
				} else {
					Object.defineProperty(this.selectFiltrate, this.filtrateWhereDatas[this.nowReadySelectionKey].field, {
						value: d.value,
						enumerable: true // 是否可枚举，默认为false
					});
					this.queryDatas();
				}
			},
			async queryDatas(){
				let {
					page,
					status,
					productLists
				} = this;
				loadingFun(filtrate, page, productLists, status, this.selectFiltrate).then(res => {
					if (res) {
						this.page = res.page;
						this.productLists = res.dataList
						this.status = res.status
					}
				})
			},
			showMultipleRulesPopup() {
				this.resetCondition()
				this.multipleRulesPopupShowStatus = true;
			},
			resetCondition() {
				this.productLists = []
				this.selectFiltrate = []
				this.selectFiltrateListsKeys = [];
			},
			isURL(url) {
			
				const strRegex = '^((https|http|ftp)://)?' //(https或http或ftp):// 可有可无
					+
					'(([\\w_!~*\'()\\.&=+$%-]+: )?[\\w_!~*\'()\\.&=+$%-]+@)?' //ftp的user@ 可有可无
					+
					'(([0-9]{1,3}\\.){3}[0-9]{1,3}' // IP形式的URL- 3位数字.3位数字.3位数字.3位数字
					+
					'|' // 允许IP和DOMAIN（域名）
					+
					'(localhost)|' //匹配localhost
					+
					'([\\w_!~*\'()-]+\\.)*' // 域名- 至少一个[英文或数字_!~*\'()-]加上.
					+
					'\\w+\\.' // 一级域名 -英文或数字 加上.
					+
					'[a-zA-Z]{1,6})' // 顶级域名- 1-6位英文
					+
					'(:[0-9]{1,5})?' // 端口- :80 ,1-5位数字
					+
					'((/?)|' // url无参数结尾 - 斜杆或这没有
					+
					'(/[\\w_!~*\'()\\.;?:@&=+$,%#-]+)+/?)$'; //请求参数结尾- 英文或数字和[]内的各种字符
				const re = new RegExp(strRegex, 'i'); // 大小写不敏感
				if (re.test(encodeURI(url))) {
					return true;
				}
				return false;
			},
			 goPage(url, open_type,type) {
			
				if (!this.isLogin) return toLogin();
				uni.showLoading({
					title: '加载中'
				});
				 getUser().then(res => {
					uni.hideLoading();
					if (res.code == 1) {
						if(type == 0){
							if (res.data.is_vip == 0) {
								this.$refs.hintBuyVip.show()
								return false
							}
						}
						if (open_type == 1) {
							uni.navigateTo({
								url: url
							})
						} else if (open_type == 2 || open_type == 3) {
							if (this.isURL(url)) {
								// #ifdef APP
								uni.navigateTo({
									url: "/pages/webview/webview?url=" + url,
								});
								// #endif
								// #ifndef APP
								window.location.href = url;
								// #endif
							} else {
								uni.navigateTo({
									url: url,
									fail(e) {
										console.log(e)
									}
								})
							}
						}
					} else {
						this.$refs.uToast.show({
							title: '系统错误，请稍后重试',
							type: 'error'
						})
					}
				})
			
			},
		}
	}
</script>
<style lang="scss">
	.content-area {
		min-width: 100vw;
		min-height: 100vh;
		display: flex;


		.selected {
			color: #2953ff;
			background-color: white;
		}

		.left-filtrate-area {
			width: 45vw;
			background-color: #f4f6ff;

			.filtrate-where-area {
				height: 80vh;
				overflow-y: auto;

				.filtrate-where-item {
					padding: 24rpx 16rpx;
					border-bottom: 2rpx solid #ebeefa;
				}


			}

			.operation-button-area {
				height: 20vh;
				justify-content: space-evenly;
			}
		}

		.right-content-area {
			width: 55vw;
			background: white;
		}
	}

	.u-main-color {
		color: #2953ff;
	}

	.product-show-area {
		padding: 0 24rpx 24rpx;

		.product-item {
			padding: 20rpx 16rpx;
			border-bottom: 2rpx solid #f4f4f5;
		}
	}


	.area-content-center {
		display: flex;
		height: 100vh;
		align-items: center;
		flex-direction: column;
		justify-content: center;
	}
</style>